<template>
    <view class="xz-vote-choose">
        <view
            class="choose-item"
            v-for="(item,index) in voteChoosesTemp"
            :key="index"
            @click="clickItem(item,index)"
        >
            <view class="item-radio">
                <view
                    class="item-radio-inner"
                    :class="[item.isChoosed?'radio-inner-selected':'']"
                ></view>
            </view>
            <view class="item-title">{{item.title}}</view>
        </view>
    </view>
</template>

<script>
    /**
     * xz-vote-choose 投票选择类型组件
     * @author xiaozuo28 zalx28@foxmail.com
     * @property {Array} voteChooses 选择类型数组,期待格式[{id:'1',title:'支持',isChoosed:false}],id,title,isChoosed均为必传
     * @property {Boolean} isAllowChoose 是否允许被选择
     * @property {Boolean} isAllowCancel 是否允许取消之前的选择
     * @event {Function} clickItem 点击投票选择触发事件,触发handleClick,返回被点击的元素和该元素在数组中的下标值
    **/
    export default {
        name:"xz-vote-choose",
        data() {
            return {
                // 投票选择类型媒介
                voteChoosesTemp:this.voteChooses,
                // 当前被选择的类型下标,默认为-1,都为被选中
                currentChoose:-1
            };
        },
        props:{
            // 投票选择类型数组
            voteChooses:{
                type:Array,
                require:false,
                default:function(){
                    return [];
                }
            },
            // 是否允许被选择
            isAllowChoose:{
                type:Boolean,
                default:true
            },
            // 是否允许取消之前的选择
            isAllowCancel:{
                type:Boolean,
                default:true
            }
        },
        watch:{
            // 监听投票选择类型数组改变
            voteChooses(newVal, oldVal){
                this.processTemp = this.formateProcess(newVal);
            },
        },
        mounted() {
            this.voteChoosesTemp = this.voteChooses;
            // this.voteChoosesTemp = this.formateVoteChooses(this.voteChooses);
        },
        methods:{
            /**
             * @description 点击投票选择类型
             * @param {Number} index 被点击的下标
             * @date 2022年5月27日16:46:59
            **/
            clickItem(item,index){
                // 是否允许选择
                if(!this.isAllowChoose){
                    return;
                }
                if(this.currentChoose !== index){
                    // 之前被选中的取消被选中
                    if(this.currentChoose !== -1){
                        this.voteChoosesTemp[this.currentChoose].isChoosed = false;
                        this.currentChoose = index;
                    }
                    // 当前被点击的被选中
                    this.voteChoosesTemp[index].isChoosed = true;
                    this.currentChoose = index;
                    item.isChoosed = true;
                    this.$emit('handleClick',item,index);
                }else{
                    if(this.currentChoose === index && !this.isAllowCancel){
                        return;
                    }
                    this.voteChoosesTemp[this.currentChoose].isChoosed = false;
                    this.currentChoose = -1;
                    item.isChoosed = false;
                    this.$emit('handleClick',item,index);
                }
            },
            /**
             * @description 格式化投票选择数据
             * @date 2022年5月27日16:46:59
             * @param {Array} array 待格式化数据
             * @return {Array} 合格投票选择数据
            **/
            // formateVoteChooses(array = {}){
            //     let arr = [];
            //     for (let i = 0; i < array.length; i++) {
            //         let obj = {
            //             id:array[i].id,
            //             title:array[i].title,
            //             isChoosed:array[i].ischoosed,
            //         };
            //         arr.push(obj);
            //     }
            //     return arr;
            // }
        }
    }
</script>

<style>
    .xz-vote-choose{
        display: flex;
        justify-content: space-between;
    }
    .choose-item{
        display: flex;
        align-items: center;
        padding: 0rpx 40rpx;
    }
    
    .choose-item:first-child{
        padding-left: 0rpx;
        padding-right: 80rpx;
    }
    
    .choose-item:last-child{
        padding-left: 80rpx;
        padding-right: 0rpx;
    }
    
    .item-radio{
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        border: 1rpx solid #EB090B;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .item-radio-inner{
        width: 80%;
        height: 80%;
        border-radius: 50%;
    }
    
    .radio-inner-selected{
        background-color: #EB090B;
    }
    
    .item-title{
        margin-left: 10rpx;
        font-size: 16px;
    }
</style>